<template>
    <h1>VUE3.0学习---reactive PK ref</h1>
    <div class = "test1">
        <h2>基本数据类型只能是ref</h2>
        <p>moon: {{ monn }}</p>
        <button @click="changeMoon">修改</button>
    </div>
    <br/>
    <div class = "test1">
        <h3>ref 修改对象类型</h3>
        <p>姓名：{{ person1.name }}</p>
        <p>年龄：{{ person1.age }}</p>
        <button @click="changName1">修改姓名</button>
        <button @click="changAge1">修改年龄</button>
        <button @click="changPerson1">修改对象</button>
    <hr/>
        <h3>reactive 修改对象类型</h3>
        <p>姓名：{{ person2.name }}</p>
        <p>年龄：{{ person2.age }}</p>
        <button @click="changName2">修改姓名</button>
        <button @click="changAge2">修改年龄</button>
        <button @click="changPerson2">修改对象</button>
    </div>
    <div>
        <h3>层级深推荐使用reactive</h3>
        <p>地址：{{ deepObj.addr.eAddr.cAddr.dAddr }}</p>
        <button @click="changeAddr">修改地址</button>
        <hr/>
        <h3>层级深推荐使用reactive</h3>
        <p>地址：{{ deepObj2.addr.eAddr.cAddr.dAddr }}</p>
        <button @click="changeAddr2">修改地址</button>
    </div>
</template>

<script lang="ts" setup>
    import {ref,reactive} from 'vue'
    // 基本数据类型只能是ref
    let monn = ref(10)
    let person1 = ref(
        {
            name:"王五",
            age:18
        }
    )
    let person2 = reactive(
        {
            name:"张三",
            age:18
        }
    )
    let deepObj = ref({
        addr:{
            eAddr:{
                cAddr:{
                    dAddr:"钱塘镇"
                }
            }
        }
    } )   
    let deepObj2 = reactive({
        addr:{
            eAddr:{
                cAddr:{
                    dAddr:"钱塘镇"
                }
            }
        }
    } ) 
    function changeMoon(){
        monn.value += 10
    }
    //修改数据
    function changName1(){
        person1.value.name += '~'
    }
    function changAge1(){
        person1.value.age += 1
    }
    // 不能直接进行赋值 person = {name:"李四",age:20}
    function changPerson1(){
        person1.value = {name:"李四",age:20}
        console.log(person1)
    }
    //修改数据
    function changName2(){
        person2.name += '~'
    }
    function changAge2(){
        person2.age += 1
    }
    // 不能直接进行赋值 person = {name:"李四",age:20}
    function changPerson2(){
        person2 = Object.assign(person2,{name:"李四",age:20})
        console.log(person2)
    }
    function changeAddr(){
        deepObj.value.addr.eAddr.cAddr.dAddr = "云门镇"
    }
    function changeAddr2(){
        deepObj2.addr.eAddr.cAddr.dAddr = "云门镇"
    }
</script>

<style scoped>
 .test1{
    font-size: 20px;
    color: blue;
    background-color: greenyellow;
    border: 2px solid #007bff; /* 设置边框的宽度和颜色 */
    border-radius: 20px; /* 将四个角变成圆形 */
    width: auto; /* 设置元素的宽度 */
    height: auto; /* 设置元素的高度 */
    padding: 20px;
 }

 button{
    margin: 2px;
 }

</style>